<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-image: linear-gradient(to right, #0367d9, #8ad9fe);
        }
        .login-wrapper {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
        .input-item:placeholder {
            text-transform: uppercase;
        }
        .btn {
      background-color: var(--blue);
      background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
      border-radius: 20px;
      border: 1px solid var(--blue);
      color: var(--white);
      cursor: pointer;
      font-size: 0.8rem;
      font-weight: bold;
      letter-spacing: 0.1rem;
      padding: 0.9rem 4rem;
      text-transform: uppercase;
      transition: transform 80ms ease-in;
    }

    .form>.btn {
      margin-top: 1.5rem;
    }

    .btn:active {
      transform: scale(0.95);
    }

    .btn:focus {
      outline: none;
    }

    .form {
      background-color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 3rem;
      height: 100%;
      text-align: center;
    }
        .btn {
            
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right,#fa8072, #e00f0c);
            color: #fff;
        }
        .form__title {
      font-weight: 300;
      margin: 0;
      margin-bottom: 1.25rem;
    }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">SMG-ESR</div>
            <div class="form-wrapper">
                <input type="password" name="password" placeholder="password" class="input-item" id="p">
                <button  class="btn" type="button" onclick="submit()">Login</button>
            </div>
        </div>
    </div>
</body>
    <script>
        function restart() 
        {
            var xhttp = new XMLHttpRequest();
            xhttp.open("POST", "/api/sys/set", true);   
            xhttp.setRequestHeader("Content-type", "application/json");
            var senddata = {
                "reboot":"1",
            }
            var res=confirm("确定要重启设备吗?");
        }

        function submit() 
        {
            var PWD = document.getElementById("p").value;
            if(PWD == "")
            {
                alert("账号 or 密码不能为空！");
            }
            else if(PWD.length >= 8 && PWD.length <= 20)
            {
                var senddata = {
                                    "passwd":document.getElementById("p" ).value,
                }
                let xhr = new XMLHttpRequest();
                xhr.open("POST", "/api/pwd/", true);
                xhr.setRequestHeader("Accept", "application/json");
                xhr.setRequestHeader("Content-Type", "application/json");
                xhr.onload = () => console.log(xhr.responseText);
                var str = JSON.stringify(senddata);
                xhr.send(str);
                
                xhr.onreadystatechange = function() 
                {
                    if (xhr.readyState == 4) 
                    {
                        
                        var json = JSON.parse(xhr.responseText);
                        var c = json.login.check;
                        // alert(JSON.stringify(res));
                        if(c == "OK")
                        {
                            setTimeout(() => {
                            alert("验证成功");
                            }, 500);
                            sessionStorage.setItem("ESR_login","PASS");
                            window.location.replace("./login/");
                        }
                        if(c == "Fail")
                        {
                            setTimeout(() => {
                            alert("验证失败，密码错误");
                            }, 500);
                        }
                    }
                }
                
            }
            else
            {
                document.getElementById("p").value="";
				alert("密码长度为8至20");
            }

        }

        window.onload=function()
        {
            sessionStorage.setItem("ESR_login","NONE");
        }
    </script>
</html>